<template>
	<s-layout title="运费查询" class="inquiry-wrap">
		<view class="container">
			<view class="card my-3 p-4">
				<view class="title my-2">
					选择地址
				</view>
				<view class="form-box">
					<view class="form-item">
						<view class="label">
							寄件地区
						</view>
						<view class="value" @tap="open('sendingRegion')">
							<input v-model="model.sendingRegion.area" disabled type="text" placeholder="请选择省市区" />
							<text class="cicon-forward"></text>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							收件地区
						</view>
						<view class="value" @tap="open('recipientRegion')">
							<input v-model="model.recipientRegion.area" disabled type="text" placeholder="请选择省市区" />
							<text class="cicon-forward"></text>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							重量(KG)
						</view>
						<uni-number-box v-model="model.packageInfo.weight" @change="valChange" />
					</view>
					<view class="form-item">
						<view class="label">
							尺寸(cm)
						</view>
						<view class="ss-flex size">
							<view class="input-box">
								<input v-model="model.packageInfo.vloumLong" type="number" placeholder="长">
							</view>
							<view class="input-box">
								<input v-model="model.packageInfo.vloumWidth" type="number" placeholder="宽">
							</view>
							<view class="input-box">
								<input v-model="model.packageInfo.vloumHeight" type="number" placeholder="高">
							</view>
						</view>
					</view>
				</view>
				<view class="red">
					注意：最终快递计费计算会比较实际重量与体积重量，取较大的数字计算为寄件费用，请知晓！
				</view>
			</view>
			<view class="buttons">
				<button class="button" @tap="query">
					查询
				</button>
				<button class="button" @tap="sheep.$router.go('/pages/mail/index')">
					去下单
				</button>
			</view>
			<view v-if="isShow" class="card my-3 p-4">
				<view class="title mb-4 py-2">
					对比品牌
				</view>
				<view class="list">
					<view v-for="item in list" :key="item.channelId" class="item">
						<view class="brand">
							<image class="logo" :src="item.channelLogoUrl"></image>
							<text class="name">{{ item.tagType }}</text>
						</view>
						<view class="price">
							¥ <text class="num">{{ item.totalFreight }}</text>
						</view>
						<view class="tag">
							限时优惠
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 省市区弹窗 -->
		<su-region-picker
		  :show="visible"
		  @cancel="visible = false"
		  @confirm="onRegionConfirm"
		/>
	</s-layout>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import sheep from '@/sheep';
	
	const list = ref([])
	const isShow = ref(false)
	const visible = ref(false)
	let keyStr = ''
	const model = reactive({
		sendingRegion: {},
		recipientRegion: {},
		packageInfo: {
			weight: 1,
			packageCount: 1,
			insured: 0,
			vloumLong: 1,
			vloumWidth: 1,
			vloumHeight: 1,
			billRemark: ''
		}
	})
	const onRegionConfirm = (e) => {
		model[keyStr] = {
			...e,
			area: `${e.province_name}-${e.city_name}-${e.district_name}`
		}
	  visible.value = false;
	};
	const open = (type) => {
		keyStr = type
		visible.value = true
	}
	
	const valChange=(e)=>{
		console.log(e)
		model.packageInfo.weight=e
	}
	
	
	const query = async () => {
		const s = model.sendingRegion
		const r = model.recipientRegion
		if (s.area && r.area) {
			const params = {
				sender: '',
				senderMobile: '',
				senderCity: s.city_name,
				senderCounty: s.district_name,
				senderProvince: s.province_name,
				senderTown: '',
				senderLocation: '',
				senderAddress: s.area.replaceAll('-', ''),
				receiver:'',
				receiverMobile: '',
				receiveCity: r.city_name,
				receiveCounty: r.district_name,
				receiveProvince: r.province_name,
				receiveTown: '',
				receiveLocation: '',
				receiveAddress: r.area.replaceAll('-', ''),
				...model.packageInfo
			}
			const { code, data } = await sheep.$api.mail.query({
				...params,
				jkty: 1,
				channelId: '',
			})
			if (code == 1) {
				list.value = data.result || []
				isShow.value = true
			}
		} else {
			uni.showToast({
			  title: '请填写地址',
			  icon: 'none',
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 240rpx;
	}
	.title {
		font-size: 32rpx;
		font-weight: 600;
	}
	.form-box {
		display: flex;
		flex-direction: column;
		column-gap: 30rpx;
		.form-item {
			height: 100rpx;
			line-height: 100rpx;
			color: #999999;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.value {
				display: flex;
				align-items: center;
			}
			.size {
				display: flex;
				column-gap: 12rpx;
				.input-box {
					width: 140rpx;
					height: 74rpx;
					display: flex;
					align-items: center;
					text-align: center;
					border-radius: 12rpx;
					border: 2rpx solid #eee;
					color: #000;
				}
			}
		}
	}
	.red {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: red;
	}
	.buttons {
		display: flex;
		justify-content: space-around;
		margin: 34rpx 0 60rpx;
		.button {
			width: 286rpx;
			height: 90rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 100rpx;
			&:first-child {
				border: 2rpx solid #0396ff;
				background-color: #fff;
				color: #0396ff;
			}
			&:last-child {
				background-color: #0396ff;
				color: #fff;
			}
		}
	}
	.list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20rpx;
		.item {
			height: 280rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			row-gap: 12rpx;
			background-color: #f5f8ff;
			border-radius: 20rpx;
			.brand {
				display: flex;
				align-items: center;
				column-gap: 10rpx;
				.logo {
					width: 40rpx;
					height: 40rpx;
					border-radius: 10rpx;
				}
				.name {
					font-size: 32rpx;
					color: #000;
				}
			}
			.price {
				color: red;
				.num {
					font-size: 40rpx;
					font-weight: 600;
				}
			}
			.tag {
				padding: 4rpx 8rpx;
				color: #ff6600;
				border: 2rpx solid #ff6600;
				border-radius: 30rpx;
			}
		}
	}
</style>